import {View, Button, Text, Image} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React from 'react';
import {connect} from 'react-redux';
import * as T from '../../types';
import './index.less';
import actions from '../../actions';
import {store2Props} from '../../selectors';
import headPic from '@/assets/image/ipland/headPic.png';
import levelIcon from '@/assets/image/ipland/level.png';
import editIcon from '@/assets/image/ipland/edit.png';
import levelBg from '@/assets/image/ipland/levelBg.png';
import bg2 from '@/assets/image/ipland/bg2.png';
import renew from '@/assets/image/ipland/renew.png';
import tip1 from '@/assets/image/ipland/tip1.png';
import uesrImg from '@/assets/image/my/uesr_pic.png';

//@ts-ignore
actions().actions.loadReducer();
//@ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class personalCenterTop extends React.Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  componentWillUnmount() {
    this.props.actions.clean();
  }

  componentWillMount(): void {
    this.props.actions.init();
  }

  componentDidShow() {}

  render() {
    const {
      main: {memberInfo, customer},
    } = this.props;
    let showRenewalButton = false;
    let levelText = '非会员';
    if (memberInfo.isAquamarineMember) {
      levelText = '蓝晶会员';
      showRenewalButton = true;
    }
    if (memberInfo.isCrystalMember) {
      levelText = '赤晶会员';
      showRenewalButton = true;
    }
    if (memberInfo.isCrystalMember && memberInfo.isAquamarineMember) {
      levelText = '双会员';
      showRenewalButton = true;
    }
    let name = customer.name || '微信用户';
    if (name.length > 6) name = `${name.slice(0, 6)}...`;
    return (
      <View className="packageIPersonalCenterTop">
        <View className="infoCon">
          <Image className="headPic" src={customer.pictureUrl || uesrImg} />
          <View className="topRightCon">
            <View className="topRightCon-info">
              <Text className="topRightCon-name">{name}</Text>
              <Image
                className="topRightCon-icon"
                src={editIcon}
                mode="widthFix"
                onClick={() => {
                  Taro.navigateTo({
                    url: '/pages/package-I/accountInformation/index',
                  });
                }}
              />
              <Image className="topRightCon-icon2" src={memberInfo?.rankBadgeImg} mode="widthFix" />
            </View>
            <View className="topRightCon-level">
              <Image className="topRightCon-levelBg" src={levelBg} mode="widthFix" />
              <Text className="topRightCon-levelText">{levelText}</Text>
            </View>
          </View>
        </View>
        <View className="levelInfo">
          <Image className="levelInfo-bg" src={bg2} mode="widthFix" />
          <View className="levelInfo-con">
            <View>
              {/* <Image className="levelInfo-con-tip1" src={tip1} mode="widthFix" /> */}
              {memberInfo.endTime && <Text className="levelInfo-con-time">{memberInfo.endTime}到期</Text>}
            </View>
            <View>
              {showRenewalButton && (
                <Image
                  className="levelInfo-con-btn1"
                  src={renew}
                  mode="widthFix"
                  onClick={() => {
                    Taro.navigateTo({
                      url: '/pages/package-A/renewalMember/index',
                    });
                  }}
                />
              )}
            </View>
          </View>
        </View>
      </View>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
